<template>
	<view class="wrap">

		<u-navbar :is-back="true" :title="groupName">
			<div style="position: absolute;right: 10rpx;">
				<u-icon name="grid" color="#909399" size="60" @click="groupData"></u-icon>
			</div>
		</u-navbar>
		
		<u-popup v-model="noticeShow" mode="bottom" width="100%" height="95%" :closeable="true">
			<h2 style="margin-top: 80rpx;margin-left: 20rpx;">通知</h2>
			<u-row gutter="16" v-for="(item, index) in noticeList" :key="index">
				<u-col span="10">
					<view>
						<p style="margin: 20rpx;">{{item.noticeText}}</p>
					</view>
				</u-col>
				<u-col span="1">
					<li @click="deleteNotice(item.id)" v-if="isAdmin==true">删除</li>
				</u-col>
				<u-col span="1">
				</u-col>
			</u-row>
		</u-popup>

		<u-popup v-model="show" mode="bottom" width="100%" height="95%" :closeable="true">
			
			<u-row gutter="16">
				<u-col span="2">
					<view class="demo-layout bg-purple">
						<u-avatar :src="groupImg" size="120"></u-avatar>
					</view>
				</u-col>
				<u-col span="10">
					<view class="demo-layout bg-purple">
						<h3>{{groupName}}</h3>
						<h4>群号：{{groupId}}</h4>
					</view>
				</u-col>
			</u-row>
			
			<u-cell-item icon="order" title="通知" @click="notice()"></u-cell-item>

			<u-cell-item title="群主" :arrow="false"></u-cell-item>
			<u-row gutter="16">
				<u-col span="2">
					<view class="demo-layout bg-purple">
						<u-avatar :src="superAdmin.headImg" size="90"></u-avatar>
					</view>
				</u-col>
				<u-col span="10">
					<view class="demo-layout bg-purple">
						<h3>{{superAdmin.nickname}}</h3>
						<h5>{{superAdmin.userId}}</h5>
					</view>
				</u-col>
			</u-row>

			<u-cell-item title="管理员" :arrow="false">{{adminList.length}}</u-cell-item>
			<u-row gutter="16" v-for="(item, index) in adminList" :key="index">
				<u-col span="2">
					<view class="demo-layout bg-purple">
						<u-avatar :src="item.headImg" size="90"></u-avatar>
					</view>
				</u-col>
				<u-col span="6">
					<view class="demo-layout bg-purple">
						<h3>{{item.nickname}}</h3>
						<h5>{{item.userId}}</h5>
					</view>
				</u-col>
				<u-col span="2">
					<view class="demo-layout bg-purple">
						<div v-show="isSuperAdmin">
							<u-button type="primary" @tap='leaderTransfer(item.userId)'>转让</u-button>
						</div>
					</view>
				</u-col>
				<u-col span="2">
					<view class="demo-layout bg-purple">
						<div v-show="isSuperAdmin">
							<u-button type="error" @tap='deleteAdmin(item.userId)'>解除</u-button>
						</div>
					</view>
				</u-col>
			</u-row>

			<u-cell-item title="成员" :arrow="false">{{userList.length}}</u-cell-item>
			<u-row gutter="16" v-for="(item, index) in userList" :key="index">
				<u-col span="2">
					<view class="demo-layout bg-purple">
						<u-avatar :src="item.headImg" size="90"></u-avatar>
					</view>
				</u-col>
				<u-col span="6">
					<view class="demo-layout bg-purple">
						<h3>{{item.nickname}}</h3>
						<h5>{{item.id}}</h5>
					</view>
				</u-col>
				<u-col span="2">
					<view class="demo-layout bg-purple">
						<div v-show="isAdmin">
							<u-button type="primary" @tap='insertAdmin(item.id)'>授权</u-button>
						</div>
					</view>
				</u-col>
				<u-col span="2">
					<view class="demo-layout bg-purple">
						<div v-show="isAdmin">
							<u-button type="error" @tap='userExitGroup(item.id)'>踢出</u-button>
						</div>
					</view>
				</u-col>
			</u-row>
			
			<u-cell-item title="申请加群" :arrow="false">{{applyList.length}}</u-cell-item>
			<u-row gutter="16" v-for="(item, index) in applyList" :key="index" :v-show="isAdmin">
				<u-col span="2">
					<view class="demo-layout bg-purple">
						<u-avatar :src="item.headImg" size="90"></u-avatar>
					</view>
				</u-col>
				<u-col span="6">
					<view class="demo-layout bg-purple">
						<h3>{{item.nickname}}</h3>
						<h5>{{item.id}}</h5>
					</view>
				</u-col>
				<u-col span="2">
					<view class="demo-layout bg-purple">
						<div v-show="isAdmin">
							<u-button type="primary" @tap='userJoinGroup(item.id)'>允许</u-button>
						</div>
					</view>
				</u-col>
				<u-col span="2">
					<view class="demo-layout bg-purple">
						<div v-show="isAdmin">
							<u-button type="error" @tap='userExitGroup(item.id)'>拒绝</u-button>
						</div>
					</view>
				</u-col>
			</u-row>
			
			<u-button type="error" @click="userExitGroup(userId)" style="margin: 40rpx;">退出</u-button>

		</u-popup>

		<div class="textarea" id="textarea">

			<span>{{tin}}</span>

			<div v-for="(item, index) in messageList" :key="index">

				<u-row gutter="16" v-if="item.userId!=userId">
					<u-col span="2">
						<view class="demo-layout">
							<u-avatar :src="item.headImg" size="70" @click ="call(item.userId)"></u-avatar>
						</view>
					</u-col>
					<u-col span="8">
						<h5>{{item.nickname}}</h5>
						<view class="demo-layout bg-purple">
							<view class="u-content">
								<rich-text :nodes="item.messageData" :selectable="true"></rich-text>
							</view>
						</view>
					</u-col>
					<h6>{{item.createTime}}</h6>
				</u-row>

				<u-row gutter="16" v-else>
					<u-col span="1">
						<view class="demo-layout">
						</view>
					</u-col>
					<u-col span="1">
						<view class="demo-layout">
							<u-icon name="reload" @click="deleteMessage(item.id)"></u-icon>
						</view>
					</u-col>
					<u-col span="8">
						<h5 style="text-align: right;">{{item.nickname}}</h5>
						<view class="demo-layout bg-purple-user">
							<view class="u-content">
								<rich-text :nodes="item.messageData" :selectable="true"></rich-text>
							</view>
						</view>
					</u-col>
					<u-col span="2">
						<view class="demo-layout">
							<u-avatar :src="item.headImg" size="70" @click ="call(item.userId)"></u-avatar>
						</view>
					</u-col>
					<h6>{{item.createTime}}</h6>
				</u-row>

			</div>

			<div v-for="index of 8">
				<h1></h1><br>
			</div>
		</div>

		<u-row gutter="16" class="bottom" style="background-color: rgb(240, 240, 240);border-radius: 10px;">
			<u-col span="1">
				<view class="demo-layout">
					<u-icon name="photo" size="50rpx" @click="upload()"></u-icon>
				</view>
			</u-col>
			<u-col span="1">
				<view class="demo-layout">
					<u-icon name="close-circle" size="50rpx" @click="cleanImg()"></u-icon>
				</view>
			</u-col>
			<u-col span="8">
				<view class="demo-layout">
					<textarea class="speak" v-model="text" maxlength="999" />
				</view>
			</u-col>
			<u-col span="2">
				<view class="demo-layout">
					<u-button type="primary" @tap='sendMsg'>发送</u-button>
				</view>
			</u-col>
			<div :style="bottomBoxStyle">
				<rich-text :nodes="imgUrl" :selectable="true">{{isUpload}}</rich-text>
			</div>
		</u-row>

	</view>
</template>

<script src="./chat.js">

</script>


<style src="./chat.css">

</style>
